"use client";
import { Card, Flex, List } from "antd";
import TagList from "@/components/TagList";
import Link from "next/link";
import "./index.css";
import { EyeOutlined } from "@ant-design/icons";

interface Props {
  questionBankId?: number;
  questionList: API.QuestionVO[];
  cardTitle?: string;
}

/**
 * 题目列表组件
 * @param props
 * @constructor
 */
const SignQuestionList = (props: Props) => {
  const { questionList = [], cardTitle, questionBankId } = props;
  const formatDateTime = (isoString) => {
    const date = new Date(isoString);

    // 格式化为两位数
    const pad = (num) => num.toString().padStart(2, "0");

    const year = date.getFullYear();
    const month = pad(date.getMonth() + 1); // 月份从0开始
    const day = pad(date.getDate());
    const hours = pad(date.getHours());
    const minutes = pad(date.getMinutes());

    return `${year}-${month}-${day} ${hours}:${minutes}`;
  };
  return (
    <Card className="question-list" title={cardTitle}>
      <List
        dataSource={questionList}
        renderItem={(item) => (
          <List.Item>
            <List.Item.Meta
              title={
                <div>
                  <Flex
                    style={{
                      flexDirection: "row",
                      justifyContent: "space-between",
                    }}
                  >
                    <Link
                      className="custom-link"
                      style={{
                        color: "#333", // 默认颜色
                        textDecoration: "none",
                        ":hover": {
                          color: "#1890ff", // 悬停颜色
                          textDecoration: "underline",
                        },
                      }}
                      href={
                        questionBankId
                          ? `/bank/${questionBankId}/question/${item.id}`
                          : `/question/${item.id}`
                      }
                    >
                      {item.title}
                    </Link>
                    <TagList tagList={item.tagList} />
                  </Flex>
                  <Flex style={{ marginTop: 15, cursor: "pointer" }}>
                    <div style={{ color: "#8c8c8c", fontSize: 10 }}>
                      {formatDateTime(item.createTime)}
                    </div>
                    <Flex style={{ marginLeft: 20 }}>
                      <EyeOutlined style={{ color: "#8c8c8c" }} />
                      <div
                        style={{
                          fontSize: 10,
                          marginLeft: 5,
                          color: "#8c8c8c",
                        }}
                      >
                        已刷题: {item.totalCount} 次
                      </div>
                    </Flex>
                  </Flex>
                </div>
              }
            />
          </List.Item>
        )}
      />
    </Card>
  );
};

export default SignQuestionList;
